<template>
  <div>
    <a-upload
      name="iFile"
      :accept="accept"
      :beforeUpload="beforeUpload"
      :customRequest="onUpload"
      :showUploadList="false"
    >
      <template v-if="fileInfo && sValue">
        <img class="image" :src="fileInfo.preview_url">
      </template>
      <template v-else>
        <div class="image">
          <a-icon class="icon-plus" :style="{ fontSize: `36x` }" type="plus" />
        </div>
      </template>
    </a-upload>
    <div v-if="fileInfo && sValue" style='line-height: normal'>
      <a :href="fileInfo.external_url" target="_blank">查看图片</a>
    </div>
  </div>
</template>
<script>
import { debounce } from '@/utils/util'
import * as UploadApi from '@/api/upload'

export default {
  name: 'UploadImage',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: Number | String,
    file: {
      type: Object
    },
    avatar: {
      type: Boolean,
      default: false
    },
    ispng: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: 'image/*'
    }
  },
  watch: {
    value (val) {
      this.sValue = val
    },
    file (val) {
      if (val.preview_url) {
        this.fileInfo = val
      }
    }
  },
  components: {
  },
  data () {
    return {
      sValue: '',
      // accept: 'image/png',
      uploadSizeLimit: 20,
      uploadUrl: UploadApi.image,
      fileInfo: this.file,
      showImg: false
    }
  },
  methods: {
    handleShowImage (img) {
      this.$refs.ShowImage.open(img)
    },
    // 事件: 上传文件之前
    beforeUpload (file) {
      const that = this
      return new Promise((resolve, reject) => {
        const showErrorMsg = debounce(this.$message.error, 20)

        if (this.ispng) {
          const isJpgOrPng = file.type === 'image/png'
          if (!isJpgOrPng) {
            showErrorMsg('请上传png图片')
            return reject(false)
          }
        }

        if (that.avatar) {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => {
            const image = new Image()
            image.src = reader.result
            image.onload = () => {
              const w = image.width
              const h = image.height
              if (w != 295 && h != 413) {
                showErrorMsg('请上传 295px*413px 一寸头像')
                return reject(false)
              } else {
                return resolve(true)
              }
            }
          }
        } else {
          return resolve(true)
        }
      })
    },
    // 事件: 自定义上传
    onUpload (info) {
      this.isLoading = true
      const formData = new FormData()
      formData.append('iFile', info.file)
      formData.append('groupId', 0)
      // 开始上传
      this.uploadUrl(formData)
        .then((res) => {
          this.fileInfo = res.data.fileInfo
          this.sValue = this.fileInfo.file_id
          this.onChange()
        })
    },
    onChange () {
      this.$emit('change', this.sValue, [this.fileInfo])
    }
  }
}
</script>

<style scoped lang='less'>
.image {
  cursor: pointer;
  width: 80px;
  height: 80px;
  border: 1px dashed #e8e8e8;
  color: #dad9d9;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    border: 1px dashed #40a9ff;
    color: #40a9ff;
  }

  .icon-plus {
    font-size: 32px;
  }
}
</style>
